<template>
    <div class="loginRoot">

        <div class="head">
            <h1>XXXX系统</h1>
        </div>
        <div class="loginBlock">

            <div class="left">

            </div>

            <a-form>
                <a-form-item
                        :label-col="formItemLayout.labelCol"
                        :wrapper-col="formItemLayout.wrapperCol"

                >
                    <a-input
                            v-model="form.username"
                            v-decorator="[
                              'username',
                              {rules: [{ required: true, message: '请输入账号' }]}
                            ]"
                            placeholder="请输入账号">
                        <a-icon
                                slot="prefix"
                                type="user"
                                style="color: rgba(0,0,0,.25)"/>
                    </a-input>
                </a-form-item>
                <a-form-item
                        :label-col="formItemLayout.labelCol"
                        :wrapper-col="formItemLayout.wrapperCol">
                    <a-input
                            v-model="form.password"
                            type="password"
                            v-decorator="[
                              'password',
                              {rules: [{ required: true, message: '请输入密码' }]}
                            ]"
                            placeholder="请输入密码"
                    >
                        <a-icon
                                slot="prefix"
                                type="lock"
                                style="color: rgba(0,0,0,.25)"/>
                    </a-input>
                </a-form-item>

                <a-form-item
                        :label-col="formTailLayout.labelCol"
                        :wrapper-col="formTailLayout.wrapperCol"
                >
                    <a-button
                            type="primary"
                            @click="check"
                    >
                        登录
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
    const formItemLayout = {
        labelCol: {span: 4},
        wrapperCol: {span: 16},
    };
    const formTailLayout = {
        labelCol: {span: 4},
        wrapperCol: {span: 8, offset: 4},
    };
    import {Form, Input, Button, Icon, notification, message} from 'ant-design-vue';

    import login from '../components/login'
    import Vue from 'vue'

    export default {

        components: {
            AForm: Form,
            AFormItem: Form.Item,
            AInput: Input,
            AButton: Button,
            AIcon: Icon
        },

        beforeRouteEnter(to, from, next){

            if(Vue.prototype.$loginPath != undefined){

                next({path:Vue.prototype.$loginPath});
              //  next(Vue.prototype.$loginComponent);
            }else{
                console.log("使用默认登录界面");
                next();
            }
        },
        data() {
            return {
                checkNick: false,
                formItemLayout,
                formTailLayout,
                form: {username: '', password: ''}//this.$form.createForm(this),
            };
        },
        methods: {
            check() {
                if (this.form.username == "") {
                    notification.warn({
                        message: '提示',
                        description: '请输入用户名',
                    });
                    return;
                }

                if (this.form.password == "") {
                    notification.warn({
                        message: '提示',
                        description: '请输入密码',
                    });
                    return;
                }

                this.login();
            },

            login() {

                login.login(this.form.username, this.form.password, this.$router, s => {

                    notification.success({
                        message: '提示',
                        description: '登录成功',
                    });

                }, e => {
                    notification.error({
                        message: '提示',
                        description: e,
                    });
                })

            }
        },
    };
</script>

<style scoped lang="scss">


    .loginRoot {

        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: url("../assets/bg-line-login.png") top center;
    }

    .head h1 {
        color: white;
        font-weight: bolder;
        font-size: 36px;
    }

    .loginBlock {
        display: flex;
        flex-direction: row;
        width: 800px;
        margin: 0 auto;
        border-style: solid;
        border-width: 1px;
        border-color: hsla(0, 0%, 82.7%, .3);
        border-radius: 10px;
        background-color: hsla(0, 0%, 100%, .2);
        -webkit-box-shadow: 0 15px 40px rgba(0, 0, 0, .2);
        box-shadow: 0 15px 40px rgba(0, 0, 0, .2);

        .left {
            border: 1px solid red;
            width: 400px;
        }
        form {
            padding: 50px;
            color: white;
            width: 400px;
        }
    }
</style>
